import React from 'react';

import {
    View,
    Text,
    StyleSheet,
    ActivityIndicator
} from 'react-native';

import Dialog from './../Dialog';

import Find from './find';

import * as Const from './../../const';

interface Props {
    text?: string
}

const Content = (props: Props) => (
    <View style={styles.container}>
        <ActivityIndicator
            size="large"
            color={Const.color}
        />
        <Text style={styles.loading}>
            {props.text || `Loading..`}
        </Text>
    </View>
)

let _close: Function = () => null;

const show = (text?: string) => {
    const props: any = {
        backClose:false,
        direction: 'none',
    }
    _close = Dialog.show(
        <Content text={text}/>, props
    )
}

const close = () => (
    setTimeout(_close, 0)
);

const container = () => (
    <View style={styles.flex_1}>
        <ActivityIndicator
            size="large"
            color={Const.color}
        />
    </View>
)

const find = () => (
    <View style={styles.flex_1}>
        <Find />
    </View>
)

export default {
    Find:find,
    show: show,
    close: close,
    container:container
}

const styles: any = StyleSheet.create({
    flex_1:{
        flex:1,
        alignItems:`center`,
        justifyContent:`center`
    },
    container: {
        width: 110,
        height: 110,
        borderRadius: 8,
        alignItems: `center`,
        alignSelf: `center`,
        backgroundColor: `#fff`,
        justifyContent: `center`
    },
    loading: {
        fontSize: 14,
        marginTop: 6,
        color: Const.color
    }
});